<template>
  <div :id="'circleEcharts' + id" style="width: 100%; height: 100%;"/>
</template>
<script>
import * as echarts from "echarts";
import {colorOptions} from "@/utils/color";

export default {
  props: {
    data: {
      type: Array,
      default: []
    },
    id: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      circleEcharts: null
    }
  },
  created() {
    let getflname = [], getflvalue = [];
    let that = this;
    if (this.data.length > 0) {
      this.data.map(i => {
        getflname.push(i.gameName);
        getflvalue.push(i.singular);
      })
    }

    this.$nextTick(() => {
      this.circleEcharts = echarts.init(document.getElementById('circleEcharts' + this.id), "macarons");

      // 圆环值
      var data1 = [];
      for (var i = 0; i < getflname.length; i++) {
        data1.push({name: getflname[i], value: getflvalue[i]});
      }
      var num = 0;
      const seriesOption2 = data1.map((item, index) => {
        num += item.value;
        return {
          type: "bar",
          data: [, , num,],
          coordinateSystem: "polar",
          z: 9999 - index,
          name: item.name,
          roundCap: true,
          color: colorOptions()[index],
          barGap: "-100%",
        };
      });

      var option = {
        backgroundColor: "#ffffff",
        color: colorOptions(),
        tooltip: {
          show: true,
          formatter: function (a, b, c) {
            let data = data1.find(i => i.name == a.seriesName);
            // 占总的百分比
            let per = (((data.value/num)*100 ) || 0).toFixed(2) + "%";

            return a.seriesName + ': <br/>' + data.value + ' 单('+per+')';
          }
        },
        angleAxis: {
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          min: 0,
          max: num,
        },
        radiusAxis: {
          type: "category",
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          data: ['a', 'b', 'c', 'd'],
          z: 10,
        },
        polar: {
          radius: "90%",
        },
        series: [{
          type: "pie",
          center: ["50%", "50%"],
          data: [{}],
        }, ...seriesOption2],
      };


      this.circleEcharts.setOption(option);

      that.$forceUpdate();
      window.addEventListener('resize', () => {
        that.circleEcharts.resize()
      });
    })
  }
}
</script>
